<!--
OssType(类型image、video、pdf)
file(链接)
length(数量)
-->

<template>
  <el-upload
    :class="['avatar-uploader',fileList.length>=length?'disabled':'']"
    action
    :http-request="Upload"
    :list-type="OssType=='image'?'picture-card':'text'"
    :on-preview="handlePictureCardPreview"
    :on-remove="removeActorPic"
    :file-list="fileList"
    :accept="OssType=='image'?'image/jpeg,image/png':OssType=='pdf'?'.pdf':'video/mp4'">
    <div v-if="OssType=='image'">
      <el-progress  type="circle" :percentage="progress" v-show="showProgress"></el-progress>
      <i class="el-icon-plus"></i>
    </div>
    <div v-else>
      <el-button size="small" type="primary">点击上传</el-button>
      <el-progress  :percentage="progress" v-show="showProgress"></el-progress>
    </div>

    <!--<div v-if="!uploadDisabled">
      <el-button v-if="OssTypeVideo" size="small" type="primary">点击上传</el-button>
    </div>-->

  </el-upload>
</template>

<script>
  import {client,deletePrivateOss} from '../plugins/ali-oss.js'
    export default {
      name: "UploadOss",
      props:{
        OssType:{
          type:String,
          default:'image'
        },
        file:{
          type:Array,
          default:()=>{
            return [];
          }
        },
        length:{
          type:Number,
          default:1
        }
      },
      watch:{
        file:{
          deep:true,
          handler:function (newV) {
            this.fileList = newV;
          }
        }
      },
      data(){
        return{
          showProgress:false,//显示隐藏进度条
          progress:0 ,//进度条数据
          fileList:[]
        }
      },
      methods:{
        //上传文件钩子
        Upload(file){
          let fileName = this.CreateFileName(file.file);//文件名生成
          const that = this;
          client(that.dataObj)
            .multipartUpload(fileName, file.file, {
              progress: function(p) {
                that.showProgress = true;
                that.progress = Math.floor(p * 100);//p进度条的值
                if(that.progress==100){that.showProgress = false;}
              },
              headers: {
                Expires: 36000000
              }
            })
            .then(result => {
              that.fileList.push({name:file.file.name,url:'http://big-file.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/'+result.name});
              //that.$emit('change',that.fileList);
              that.$message({type:'success',message:'上传成功'});
            })
            .catch(err => {
              console.log("err:", err);
            });
        },
        //生成文件名
        CreateFileName(file) {
          let fileType = file.name.split('.')[file.name.split('.').length - 1]
          let date = new Date()
          let year = date.getFullYear()
          let month = date.getMonth() + 1
          month = (month < 10 ? '0' + month : month)
          let day = date.getDate()
          day = (day < 10 ? '0' + day : day)
          let fileName = this.OssType=='image'?'img/' + year + '/' + year + month + '/' + year + month + day + '/' + new Date().getTime() + '.' + fileType: 'video/' + year + '/' + year + month + '/' + year + month + day + '/' + new Date().getTime() + '.' + fileType
          return fileName;
        },
        /*//上传文件限制
        beforeAvatarUpload(file){
          console.log(file);
          //图片限制
          if(this.OssType=='image'){
            const typePic = file.type==='image/jpeg'||'image/png';
            if(!typePic){
              this.$message({type:'warning',message:'上传图片只能是 JPG或PNG 格式!'});
            }
            return typePic;
          }else {
            //视频限制
            const typePic = file.type==='video/mp4';
            if(!typePic){
              this.$message({type:'warning',message:'上传视频只能是 MP4 格式!'});
            }
            return typePic ;
          }
        },*/
        //删除图片钩子
        removeActorPic(file, fileList){
          this.fileList = fileList;
          this.$emit('change',fileList);
        },
        //点击查看大图
        handlePictureCardPreview(file){
          //console.log(file);
          window.open(file.url,'_search');
        },
      }
    }
</script>

<style>
  .disabled .el-upload--picture-card {
    display: none !important;
  }
</style>



// WEBPACK FOOTER //
// src/components/UploadOss.vue